<template>
  <a-modal
    width="800px"
    v-drag
    :visible="visible"
    :destroyOnClose="true"
    :maskClosable="false"
    title="组织架构维护"
    on-ok="handleOk"
  >
    <template slot="footer">
      <a-button key="back"> 取消 </a-button>
      <a-button key="submit" @click="onSubmit" type="primary"> 确定 </a-button>
    </template>
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-row>
        <a-col :span="12">
          <a-form-model-item
            ref="ParentName"
            label="上级单位"
            prop="ParentName"
          >
            <a-tree-select
              :tree-data="treeData"
              v-model="value"
              show-search
              style="width: 100%"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="Please select"
              allow-clear
            >
            </a-tree-select>
          </a-form-model-item>
          <a-form-model-item ref="Name" label="全称" prop="Name">
            <a-input v-model="form.Name" />
          </a-form-model-item>
          <a-form-model-item ref="ShortName" label="简称" prop="ShortName">
            <a-input v-model="form.ShortName" />
          </a-form-model-item>
          <a-form-model-item
            ref="MainSupervisor"
            label="负责人"
            prop="MainSupervisor"
          >
            <a-input v-model="form.MainSupervisor" />
          </a-form-model-item>
          <a-form-model-item label="备注" prop="Remark">
            <a-input v-model="form.Remark" type="textarea" />
          </a-form-model-item>
        </a-col>
        <a-col :span="12">
          <a-form-model-item
            ref="MainSupervisorContact"
            label="联系方式"
            prop="MainSupervisorContact"
          >
            <a-input v-model="form.MainSupervisorContact" />
          </a-form-model-item>
          <a-form-model-item label="类型" prop="Nature">
            <a-select v-model="form.Nature" placeholder="请选择类型">
              <a-select-option value="shanghai"> Zone one </a-select-option>
              <a-select-option value="beijing"> Zone two </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="禁用" prop="isFreeze">
            <a-switch v-model="form.IsFreeze" />
          </a-form-model-item>
          <a-form-model-item ref="OrderNo" label="排序号" prop="OrderNo">
            <a-input-number
              id="inputNumber"
              style="width: 100%"
              v-model="form.OrderNo"
              :min="1"
              :max="10"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
const treeData = [
  {
    title: "四川省",
    value: "四川省",
    key: "0-0",
    slots: { icon: "orgparent" },
    children: [
      {
        title: "绵阳市消防救援支队",
        value: "绵阳市消防救援支队",
        key: "0-0-0",
        slots: {
          icon: "orgparent",
        },
        children: [
          {
            title: "支队机关",
            value: "支队机关",
            key: "0-0-0-1",
            slots: {
              icon: "orgparent",
            },
            children: [
              {
                value: "战勤保障科",
                title: "战勤保障科",
                key: "0-0-0-0-1",
                slots: {
                  icon: "org",
                },
              },
              {
                title: "组织干部科",
                value: "组织干部科",
                key: "0-0-0-0-2",
                slots: { icon: "org" },
              },
              {
                title: "防火监督科",
                value: "防火监督科",
                key: "0-0-0-0-3",
                slots: { icon: "org" },
              },
              {
                title: "支队机关",
                value: "支队机关",
                key: "0-0-0-0-4",
                slots: { icon: "org" },
              },
              {
                title: "法制与社会消防工作科",
                value: "法制与社会消防工作科",
                key: "0-0-0-0-5",
                slots: { icon: "org" },
              },
            ],
          },
          {
            title: "涪城区消防大队",
            value: "涪城区消防大队",
            key: "0-0-0-2",
            slots: { icon: "org" },
          },
          {
            title: "经开区消防大队",
            value: "经开区消防大队",
            key: "0-0-0-3",
            slots: { icon: "org" },
          },
          {
            title: "江油市消防大队",
            value: "江油市消防大队",
            key: "0-0-0-4",
            slots: { icon: "org" },
          },
          {
            title: "战勤保障科",
            value: "战勤保障科",
            key: "0-0-0-5",
            slots: { icon: "org" },
          },
          {
            title: "北川县消防大队",
            value: "北川县消防大队",
            key: "0-0-0-6",
            slots: { icon: "org" },
          },
          {
            title: "平武县消防大队",
            value: "平武县消防大队",
            key: "0-0-0-7",
            slots: { icon: "org" },
          },
          {
            title: "安州区消防大队",
            value: "安州区消防大队",
            key: "0-0-0-8",
            slots: { icon: "org" },
          },
          {
            title: "盐亭县消防大队",
            value: "盐亭县消防大队",
            key: "0-0-0-9",
            slots: { icon: "org" },
          },
          {
            title: "三台县消防大队",
            value: "三台县消防大队",
            key: "0-0-0-10",
            slots: { icon: "org" },
          },
          {
            title: "游仙区消防大队",
            value: "游仙区消防大队",
            key: "0-0-0-11",
            slots: { icon: "org" },
          },
          {
            title: "科创园区消防大队",
            value: "科创园区消防大队",
            key: "0-0-0-12",
            slots: { icon: "org" },
          },
          {
            title: "直属中队",
            value: "直属中队",
            key: "0-0-0-13",
            slots: { icon: "org" },
          },
          {
            title: "高新区消防大队",
            value: "高新区消防大队",
            key: "0-0-0-14",
            slots: { icon: "org" },
          },
          {
            title: "特勤中队",
            value: "特勤中队",
            key: "0-0-0-15",
            slots: { icon: "org" },
          },
        ],
      },
    ],
  },
];
export default {
  data() {
    return {
      value: "",
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      other: "",
      form: {
        ParentName: "",
        Name: "",
        ShortName: "",
        MainSupervisor: "",
        MainSupervisorContact: "",
        Nature: "",
        IsFreeze: "",
        OrderNo: "",
        Remark: "",
      },
      rules: {
        Name: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
        ],
        region: [
          {
            required: true,
            message: "Please select Activity zone",
            trigger: "change",
          },
        ],
        date1: [
          { required: true, message: "Please pick a date", trigger: "change" },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "Please select at least one activity type",
            trigger: "change",
          },
        ],
        resource: [
          {
            required: true,
            message: "Please select activity resource",
            trigger: "change",
          },
        ],
        desc: [
          {
            required: true,
            message: "Please input activity form",
            trigger: "blur",
          },
        ],
      },
      visible: false,
    };
  },
  created() {},
  methods: {
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },

    onSelect(selectedKeys, info) {
      console.log("selected", selectedKeys, info);
    },
    onCheck(checkedKeys, info) {
      console.log("onCheck", checkedKeys, info);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
